元件中資料與事件的傳遞

在元件上使用v-model指令

• 如果不使用 v-model 指令，要實現相同的效果也不是不可能，範例程式如下：

<div id="Application">
    <div>
        <input :value="inputText" @input="action"/>
        <div>{{inputText}}</div>
        <button @click="this.inputText = ''">清空</button>
    </div>
</div>

<script>
    const App = Vue.createApp({
        data(){
            return {
                inputText:""
            }
        },
        methods:{
            action(event){
                this.inputText = event.target.value
            }
        }
    })
    App.mount("#Application")
</script>

• 修改後程式的執行效果與修改前完全一樣，程式中先使用v-bind指令來控制輸入框的內容，即當屬性inputText改變後，v-bind指令會將其同步更新到輸入框中，之後使用v-on:input指令來監聽輸入框的輸入事件，當輸入框的輸入內容發生變化時，手動透過action函數更新inputText屬性，這樣就實現了雙向綁定的效果，這也是v-model指令的基本工作原理。